<template>
  <div class="passenger">
    <div class="header">
      <div class="table">
        <div class="tuo">
          <div class="tuo-1">
            <div class="tuo-2"></div>
            <span>常旅客列表</span>
          </div>
          <div>
            <el-button size="mini" type="primary" @click="getfrequentTraveler">查询常旅客</el-button>
            <el-button @click="passengers = true" size="mini" style="
                width: 96px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              ">新增
            </el-button>
          </div>
        </div>
        <!-- 常旅客列表 -->
        <el-table border :data="Frequenflyer" size="mini" :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }" style="width: 100%">
          <el-table-column prop="chineseName" label="中文姓名" width="80">
          </el-table-column>

          <el-table-column prop="gender" label="性别" width="80">
            <template slot-scope="scope">
              <template v-if="scope.row.gender == 'male'">男</template>
              <template v-if="scope.row.gender == 'female'">女</template>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="年龄" width="80">
          </el-table-column>
          <el-table-column prop="certificateType" label="证件类型" width="100">
            <template slot-scope="scope">
              <template v-if="scope.row.certificateType == 'ID_CARD'">身份证</template>
              <template v-if="scope.row.certificateType == 'MILITARY_ID'">军人证</template>
              <template v-if="scope.row.certificateType == 'PASSPORT'">护照</template>
              <template v-if="scope.row.certificateType == 'MTPFHKAMR'">港澳居民来往内地通行证</template>
              <template v-if="scope.row.certificateType == 'RPFHKMATR'">台湾居民来往大陆通行证</template>
              <template v-if="scope.row.certificateType == 'PRICFF'">外国人永久居留身份证</template>
              <template v-if="scope.row.certificateType == 'HKAMP'">港澳通行证</template>
              <template v-if="scope.row.certificateType == 'ACCOUNT_BOOK'">户口本</template>
              <template v-if="scope.row.certificateType == 'BIRTH_CERTIFICATE'">出生证明</template>
              <template v-if="scope.row.certificateType == 'TAIWAN_PASS'">台湾通行证</template>
            </template>
          </el-table-column>
          <el-table-column prop="certificateNumcer" label="证件号码">
          </el-table-column>

          <el-table-column prop="birthday" label="出生日期" width="120">
          </el-table-column>
          <el-table-column prop="nation" label="国籍" width="90">
          </el-table-column>
          <el-table-column prop="certificateDate" label="证件过期时间" width="130">
          </el-table-column>
          <el-table-column prop="phone" label="手机号码" width="130">
          </el-table-column>
          <el-table-column prop="name" label="操作" width="150">
            <template slot-scope="scope">
              <el-button style="background-color: #6090ec; color: #fff" size="mini" @click="Modifyddd(scope.row)">修改
              </el-button>

              <el-button @click="Deletepmethod(scope.row)" style="background-color: #ff0000; color: #fff" size="mini">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 新增 -->
      <el-dialog :title="title" :visible.sync="passengers" width="50%">
        <div class="header-1">
          <div class="too-1-1">
            <div class="too"></div>
            <span v-if="title == '会员信息查询-新增常旅客'">新增常旅客</span>
            <span v-if="title != '会员信息查询-新增常旅客'">修改常旅客</span>
          </div>
        </div>
        <el-form size="mini" :inline="true" ref="addpassengers" :model="addpassengers" :rules="rules">
          <el-form-item label="中文姓名" label-width="100px" prop="chineseName">
            <el-input v-model="addpassengers.chineseName" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="英文姓名" label-width="100px" prop="englishName" v-if="
              addpassengers.documents.certificateName == '外国人永久居留身份证'
            ">
            <el-input v-model="addpassengers.englishName" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="性别" label-width="100px" prop="gender">
            <el-select v-model="addpassengers.gender" size="mini" placeholder="请选择" clearable>
              <el-option v-for="item in gender" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号" label-width="100px" prop="phone">
            <el-input v-model="addpassengers.documents.phone" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="国籍" label-width="100px" prop="nation">
            <el-select v-model="addpassengers.nation" size="mini" placeholder="请选择" clearable>
              <el-option v-for="item in guoji" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="乘客类型" label-width="100px">
            <el-select v-model="addpassengers.passengertype" size="mini" placeholder="请选择" clearable>
              <el-option v-for="item in passengertypeList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="证件类型" label-width="100px" prop="certificateName">
            <el-select v-model="addpassengers.documents.certificateName" size="mini" placeholder="请选择" clearable>
              <el-option v-for="item in mold" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号" label-width="100px" prop="certificateNumcer">
            <el-input v-model="addpassengers.documents.certificateNumcer" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" label-width="100px" prop="birthday">
            <el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" size="mini"
              v-model="addpassengers.documents.birthday" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="证件有效期" label-width="100px" prop="certificateDate">
            <el-date-picker value-format="yyyy-MM-dd" size="mini" v-model="addpassengers.documents.certificateDate"
              type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="getaddPass" size="mini" type="primary">确定
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 修改 -->
      <el-dialog title="修改常旅客信息" :visible.sync="Modify" width="50%">
        <div class="header-1">
          <div class="too-1-1">
            <div class="too"></div>
            <span>修改常旅客</span>
          </div>
        </div>
        <el-form size="mini" :inline="true" :data="Frequenflyer" :model="addpassengers" class="pop">
          <el-form-item label="中文姓名">
            <el-input v-model="ravelers.chineseName" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="英文姓名">
            <el-input v-model="ravelers.englishName" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="ravelers.gender" size="mini" placeholder="请选择" clearable>
              <el-option v-for="item in gender" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="ravelers.phone" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="国籍">
            <el-select v-model="ravelers.nation" size="mini" placeholder="请选择" clearable>
              <el-option v-for="item in guoji" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件类型">
            <el-select v-model="ravelers.certificateName" size="mini" placeholder="请选择" clearable>
              <el-option v-for="item in mold" :key="item.value" :label="item.label" :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号">
            <el-input v-model="ravelers.certificateNumcer" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" size="mini" v-model="ravelers.birthday"
              type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="证件有效期">
            <el-date-picker size="mini" v-model="ravelers.certificateDate" type="date" placeholder="选择日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="getbackUpdateCommonTravelers" size="mini" style="
                width: 110px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              ">确定
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 删除常旅客 -->
      <el-dialog title="确认删除该常旅客吗" :visible.sync="Deletep" :before-close="handleClose" width="50%">
        <div class="pop-3">
          <el-button @click="getbackDeleteDocuments" size="mini" style="
              width: 110px;
              font-size: 10px;
              color: #fff;
              height: 30px;
              background-color: #f6b23e;
            ">确定
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    name: "passenger",
    // 父子传递参数
    props: ["MembershipInformationData"],
    data() {
      return {
        // 待修改数据
        waitedit: {},
        informationpassengersList: {},
        // 删除
        detele: "",
        aaaaa: {},
        Modify: false,

        value: "",
        // 乘客类型
        passengertypeList: [{
            value: "aldult",
            label: "成人",
          },
          {
            value: "child",
            label: "儿童",
          },
        ],
        // 证件类型
        gender: [{
            value: "male",
            label: "男",
          },
          {
            value: "female",
            label: "女",
          },
        ],
        guoji: [{
            value: "中国",
            label: "中国",
          },
          {
            value: "香港",
            label: "香港",
          },
        ],
        mold: [{
            value: "身份证",
            label: "身份证",
          },
          {
            value: "军人证",
            label: "军人证",
          },
          {
            value: "护照",
            label: "护照",
          },
          {
            value: "港澳居民来往内地通行证",
            label: "港澳居民来往内地通行证",
          },
          {
            value: "台湾居民来往大陆通行证",
            label: "台湾居民来往大陆通行证",
          },
          {
            value: "台湾居民来往大陆通行证",
            label: "台湾居民来往大陆通行证",
          },
          {
            value: "外国人永久居留身份证",
            label: "外国人永久居留身份证",
          },
          {
            value: "港澳通行证",
            label: "港澳通行证",
          },
          {
            value: "户口本",
            label: "户口本",
          },
          {
            value: "出生证明",
            label: "出生证明",
          },
          {
            value: "台湾通行证",
            label: "台湾通行证",
          },
        ],
        title: "会员信息查询-新增常旅客",
        // 新增
        addpassengers: {
          chineseName: "",
          englishName: "",
          gender: "",
          nation: "",
          // +会员id
          customerId: "",
          documents: {
            certificateName: "",
            certificateNumcer: "",
            birthday: "",
            certificateDate: "",
            phone: "",
          },
          // 乘客类型
          passengertype: "",
        },

        rules: {
          chineseName: [{
            required: true,
            message: "请输入姓名",
            trigger: "change"
          }, ],
          englishName: [{
            required: true,
            message: "请输入英文名",
            trigger: "change"
          }, ],
          gender: [{
            required: true,
            message: "请选择性别",
            trigger: "change"
          }],
          nation: [{
            required: true,
            message: "请选择国籍",
            trigger: "change"
          }],
          certificateName: [{
            required: true,
            message: "请选择证件类型",
            trigger: "change"
          }, ],
          certificateNumcer: [{
            required: true,
            message: "请输入证件号码",
            trigger: "change"
          }, ],
          birthday: [{
            required: true,
            message: "请选择出生日期",
            trigger: "change"
          }, ],
          certificateDate: [{
            required: true,
            message: "请选择证件有效期",
            trigger: "change"
          }, ],
          phone: [{
            required: true,
            message: "请输入电话号码",
            trigger: "change"
          }, ],
        },
        // 修改
        ravelers: {
          commonTrvelersId: "",
          chineseName: "",
          englishName: "",
          gender: "",
          nation: "",
          birthday: "",
          phone: "",
          certificateNumcer: "",
          certificateName: "",
          certificateDate: "",
        },
        Thequery: {
          nationName: "",
        },
        gongdanList: [],
        Frequenflyer: [],
        passengers: false,
        Deletep: false,
        labelPosition: "right",
        formLabelAlign: {
          name: "",
          checked: true,
        },
        radio: 3,
        documents: [],
        checked: false,
        sizeForm: {
          name: "",
          region: "",
        },
      };
    },
    methods: {
      onSubmit() {
        console.log("submit!");
      },
      handleChange(value) {
        console.log(value);
      },
      handleClose() {
        this.passengers = false;
        this.Deletep = false;
        this.Modify = false;
      },
      getDatas() {},
      // 查询常旅客信息
      getfrequentTraveler() {

        console.log(this.MembershipInformationData.customerId)
        if (this.MembershipInformationData.customerId) {
          //  console.log()
          this.$axios
            .getfrequentTraveler({
              customerId: this.MembershipInformationData.customerId,
              // customerId: 114,
              // caseId: this.Thequery.caseId,
              // caseStatus: this.Thequery.caseStatus,
              // afterTime: this.Thequery.afterTime,
              // agoTime: this.Thequery.agoTime,
              // orderId: this.Thequery.orderId,
              // orderType: this.Thequery.orderType,
            })
            .then((res) => {
              console.log(res);
              if (res.code == "200") {
                // 工单列表数据
                this.Frequenflyer = res.data;
                console.log(this.Frequenflyer);
                let list = JSON.parse(JSON.stringify(res.data));
                this.gongdanList = list.map((item) => {
                  return {
                    item: birthday,
                    item: certificateName
                  };
                });
                console.log(this.gongdanList);
              } else {
                this.$message.error('请先查会员信息');
              }
            });
        } else {
          this.$message.error('请先查会员信息');
        }

      },

      // 删除常旅客
      getbackDeleteDocuments() {
        // console.log(documents);
        this.$axios
          .getbackDeleteDocuments({
            commontrvelersId: this.detele,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.getfrequentTraveler();
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.Deletep = false;
            }
          });
      },
      // 新增
      getaddPass() {
        if (
          this.addpassengers.chineseName == "" &&
          this.addpassengers.englishName == "" &&
          this.addpassengers.gender == "" &&
          this.addpassengers.nation == "" &&
          this.addpassengers.passengertype == ""
        ) {
          this.$confirm("请填写完整信息", "提示", {
            confirmButtonText: "确定",
            type: "warning",
          });
        } else {
          this.getaddPassenger();
        }
      },
      getaddPassenger() {
        console.log(this.MembershipInformationData);
        let documents = [];
        documents.push(this.addpassengers.documents);
        this.$axios
          .getaddPassenger({
            customerId: this.MembershipInformationData.customerId,
            chineseName: this.addpassengers.chineseName,
            englishName: this.addpassengers.englishName,
            gender: this.addpassengers.gender,
            nation: this.addpassengers.nation,
            documents: documents,
            type: this.addpassengers.passengertype,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.getfrequentTraveler();
              this.$message({
                message: "新增成功",
                type: "success",
              });
              this.passengers = false;
            } else {}
          });
      },
      // 修改
      getbackUpdateCommonTravelers() {
        this.title = "会员信息查询-修改常旅客";
        if (
          this.ravelers.chineseName != "" &&
          this.ravelers.gender != "" &&
          this.ravelers.nation != "" &&
          this.ravelers.certificateName != "" &&
          this.ravelers.birthday &&
          this.ravelers.certificateDate &&
          this.ravelers.phone
        ) {
          this.$axios
            .getbackUpdateCommonTravelers({
              customerId: this.MembershipInformationData.customerId,
              commonTrvelersId: this.commonTrvelersId,
              chineseName: this.ravelers.chineseName,
              englishName: this.ravelers.englishName,
              gender: this.ravelers.gender,
              nation: this.ravelers.nation,
              trvelersId: this.aaaaa.trvelersId,
              certificateName: this.ravelers.certificateName,
              certificateNumcer: this.ravelers.certificateNumcer,
              birthday: this.ravelers.birthday,
              certificateDate: this.ravelers.certificateDate,
              phone: this.ravelers.phone,
            })
            .then((res) => {
              console.log(res);
              if (res.code == "200") {
                this.getfrequentTraveler();
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.Modify = false;
                this.getfrequentTraveler();
              }
            });
        } else {
          this.$message.error("请填写正确的乘客信息");
        }
      },
      // 查询待修改信息
      getbackSelectDocumentsById() {
        this.$axios
          .getbackSelectDocumentsById({
            passengerDocumentsId: String(this.aaaaa.passengerDocumentsId),
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.ravelers = res.data;
              this.ravelers.birthday = res.data.documents[0].birthday;
              // this.ravelers.birthday = res.data.documents[0].birthday;
              this.ravelers.certificateNumcer =
                res.data.documents[0].certificateNumcer;
              this.ravelers.phone = res.data.documents[0].phone;
              this.ravelers.certificateName =
                res.data.documents[0].certificateName;
              this.ravelers.certificateDate =
                res.data.documents[0].certificateDate;
            }
          });
      },
      // 修改
      Modifyddd(row) {
        this.Modify = true;
        console.log(row);
        this.aaaaa = row;
        console.log(this.aaaaa.trvelersId);
        this.getbackSelectDocumentsById();
      },
      // 删除
      Deletepmethod(row) {
        this.Deletep = true;
        console.log(row);
        this.detele = row.trvelersId;
      },
    },

    mounted() {
      if (this.MembershipInformationData.customerId) {
        // this.getfrequentTraveler()
      }
      // console.log(this.MembershipInformationData)
      // 查询常旅客
      // this.getfrequentTraveler();
    },
  };
</script>
<style scoped>
  .passenger {
    height: 100vh;
    background-color: #f7f7f7;
  }

  .tuo {
    font-weight: bolder;
    display: flex;
    justify-content: space-between;
    margin-right: 20px;
    /* padding-top: 20px;
  margin-left: 20px; */
  }

  .tuo-1 {
    display: flex;
  }

  .tuo-2 {
    width: 3.5px;
    height: 17px;
    background-color: #4b71bf;
    margin-top: 2px;
    margin-right: 4px;
    font-size: 12px;
    margin-bottom: 25px;
  }

  .table {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .tabs {
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 20px;
  }

  .add {
    width: 680px;
    height: 350px;
    background-color: #fff;
    margin-left: 500px;
    border: 1px solid #c4c4c4;
  }

  .pop-9 {
    font-size: 11px;
    width: 80px;
    padding-top: 5px;
  }

  .pop-7 {
    font-size: 11px;
    width: 55px;
    padding-top: 5px;
    margin-left: 10px;
  }

  .pop-8 {
    font-size: 11px;
    padding-top: 10px;
    color: black;
  }

  .pop-8-1 {
    padding-top: 5px;
    width: 120px;
  }

  .pop {
    margin-left: 30px;
  }

  .pop-1 {
    display: flex;
    width: 250px;
  }

  .pop-1-2 {
    display: flex;
    margin-bottom: 12px;
    margin-right: 10px;
  }

  .pop-2 {
    display: flex;
  }

  .pop-3 {
    margin-top: 20px;
  }

  .add-1 {
    display: flex;
    font-size: 11px;
    margin-bottom: 5px;
  }

  .add-1-2 {
    width: 48px;
    height: 48px;
    background-color: black;
    border-radius: 50%;
    margin-left: 10px;
  }

  .add-1-3 {
    margin-top: 15px;
    margin-left: 10px;
    color: #2f80ed;
  }

  .add-1-4 {
    font-size: 11px;
    color: #828282;
    margin-left: 80px;
    margin-bottom: 15px;
  }

  .pop-4 {
    font-size: 16px;
    font-weight: bolder;
    color: #ff0000;
  }

  .too-1-1 {
    display: flex;
    font-size: 20px;
  }

  .too {
    width: 3.5px;
    height: 22px;
    background-color: #4b71bf;
    margin-top: 2px;
    margin-right: 4px;
    margin-bottom: 25px;
  }

  .radio {
    margin-top: 5px;
  }
</style>